<!--
 * @Author: 梁青春
 * @Date: 2025-01-15 14:30:00
 * @LastEditTime: 2025-10-16 11:08:30
 * @LastEditors: 梁青春
 * @Description: 收费看板弹窗组件
-->
<template>
  <el-dialog
    v-model="visible"
    title="收费看板"
    width="73vw"
    :before-close="handleClose"
    class="charging-dashboard-dialog"
    destroy-on-close
  >
    <!-- 弹窗头部统计信息 -->
    <div class="dashboard-header">
      <div class="stats-cards">
        <div class="stat-card">
          <div class="stat-label">在院患者</div>
          <div class="stat-value">81</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">收费总额</div>
          <div class="stat-value">425868.62</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">押金总余额</div>
          <div class="stat-value">376903.07</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">退费总额</div>
          <div class="stat-value">48965.55</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">总欠费金额</div>
          <div class="stat-value">24529.68</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">总欠费人数</div>
          <div class="stat-value">5</div>
        </div>
      </div>
    </div>

    <!-- Tab页内容 -->
    <div class="dashboard-content">
      <el-tabs v-model="activeTab" class="dashboard-tabs">
        <!-- 对账信息Tab页 -->
        <el-tab-pane label="对账信息" name="reconciliation">
          <div class="reconciliation-content">
            <!-- 对账信息筛选条件 -->
            <div class="filter-section">
              <div class="filter-row">
                <el-button-group>
                  <el-button :type="timeFilter === 'today' ? 'primary' : ''" @click="timeFilter = 'today'"
                    >今天</el-button
                  >
                  <el-button :type="timeFilter === 'yesterday' ? 'primary' : ''" @click="timeFilter = 'yesterday'"
                    >昨天</el-button
                  >
                  <el-button :type="timeFilter === 'thisMonth' ? 'primary' : ''" @click="timeFilter = 'thisMonth'"
                    >本月</el-button
                  >
                  <el-button :type="timeFilter === 'lastMonth' ? 'primary' : ''" @click="timeFilter = 'lastMonth'"
                    >本月</el-button
                  >
                </el-button-group>
                <el-date-picker v-model="selectedDate" type="date" placeholder="选择日期" style="margin-left: 10px" />
                <el-button type="primary" :icon="Search" style="margin-left: 10px">搜索</el-button>
              </div>
            </div>

            <!-- 对账统计表格 -->
            <div class="reconciliation-tables">
              <!-- 实收合计 -->
              <div class="table-section">
                <div class="section-title">对账信息</div>
                <div class="summary-row">
                  <div class="summary-item">
                    <span class="label">实收合计</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="summary-item">
                    <span class="label">国家医保合计</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="summary-item">
                    <span class="label">校园卡合计</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="summary-item">
                    <span class="label">其他支付合计</span>
                    <span class="value">0.00</span>
                  </div>
                </div>
              </div>

              <!-- 收费类别 -->
              <div class="table-section">
                <div class="section-title">收费类别</div>
                <div class="category-grid">
                  <div class="category-item">
                    <span class="label">西药</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="category-item">
                    <span class="label">中成药</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="category-item">
                    <span class="label">中药饮片</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="category-item">
                    <span class="label">中药颗粒</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="category-item">
                    <span class="label">治疗费</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="category-item">
                    <span class="label">理疗费</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="category-item">
                    <span class="label">检查费</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="category-item">
                    <span class="label">检验费</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="category-item">
                    <span class="label">医用耗材</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="category-item">
                    <span class="label">加工费</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="category-item">
                    <span class="label">费用合计</span>
                    <span class="value">0.00</span>
                  </div>
                </div>
              </div>

              <!-- 收费方式 -->
              <div class="table-section">
                <div class="section-title">收费方式</div>
                <div class="payment-grid">
                  <div class="payment-item">
                    <span class="label">医保</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="payment-item">
                    <span class="label">微信</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="payment-item">
                    <span class="label">支付宝</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="payment-item">
                    <span class="label">现金</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="payment-item">
                    <span class="label">银联支付</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="payment-item">
                    <span class="label">聚合支付</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="payment-item">
                    <span class="label">校园卡支付</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="payment-item">
                    <span class="label">费用合计</span>
                    <span class="value">0.00</span>
                  </div>
                </div>
              </div>

              <!-- 医保支付 -->
              <div class="table-section">
                <div class="section-title">医保支付</div>
                <div class="insurance-grid">
                  <div class="insurance-item">
                    <span class="label">支付总额</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="insurance-item">
                    <span class="label">统筹支付</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="insurance-item">
                    <span class="label">个账支付</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="insurance-item">
                    <span class="label">个人现金支付</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="insurance-item">
                    <span class="label">应缴付金额</span>
                    <span class="value">0.00</span>
                  </div>
                  <div class="insurance-item">
                    <span class="label">结算笔数</span>
                    <span class="value">0</span>
                  </div>
                  <div class="insurance-item">
                    <span class="label">退费笔数</span>
                    <span class="value">0</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 费用明细Tab页 -->
        <el-tab-pane label="费用明细" name="details">
          <div class="details-content">
            <!-- 费用明细筛选条件 -->
            <div class="filter-section">
              <div class="filter-row">
                <el-button-group>
                  <el-button :type="timeFilter === 'today' ? 'primary' : ''" @click="timeFilter = 'today'"
                    >今天</el-button
                  >
                  <el-button :type="timeFilter === 'yesterday' ? 'primary' : ''" @click="timeFilter = 'yesterday'"
                    >昨天</el-button
                  >
                  <el-button :type="timeFilter === 'thisMonth' ? 'primary' : ''" @click="timeFilter = 'thisMonth'"
                    >本月</el-button
                  >
                  <el-button :type="timeFilter === 'lastMonth' ? 'primary' : ''" @click="timeFilter = 'lastMonth'"
                    >本月</el-button
                  >
                </el-button-group>
                <el-date-picker v-model="selectedDate" type="date" placeholder="选择日期" style="margin-left: 10px" />
                <el-select v-model="feeTypeFilter" placeholder="全部费用类型" style="width: 150px">
                  <el-option label="全部费用类型" value="" />
                  <el-option label="西药" value="western_medicine" />
                  <el-option label="中成药" value="chinese_medicine" />
                  <el-option label="检查费" value="examination" />
                  <el-option label="治疗费" value="treatment" />
                </el-select>
                <el-select
                  v-model="paymentMethodFilter"
                  placeholder="全部支付方式"
                  style="width: 150px; margin-left: 10px"
                >
                  <el-option label="全部支付方式" value="" />
                  <el-option label="现金" value="cash" />
                  <el-option label="医保" value="insurance" />
                  <el-option label="微信" value="wechat" />
                  <el-option label="支付宝" value="alipay" />
                </el-select>
                <el-input
                  v-model="patientSearchText"
                  placeholder="患者/床位号/住院号"
                  style="width: 200px; margin-left: 10px"
                  clearable
                />
                <el-button type="primary" :icon="Search" style="margin-left: 10px">搜索</el-button>
                <el-button type="primary" :icon="Printer" style="margin-left: 10px">导出</el-button>
              </div>
            </div>

            <!-- 费用明细表格 -->
            <div class="details-table">
              <el-table :data="feeDetailsList" stripe style="width: 100%" max-height="400">
                <el-table-column prop="occurTime" label="发生时间" />
                <el-table-column prop="bedNumber" label="床位号" />
                <el-table-column prop="patientName" label="患者" />
                <el-table-column prop="feeAmount" label="费用额" align="right" />
                <el-table-column prop="discount" label="优惠" align="right" />
                <el-table-column prop="reportAmount" label="报销" align="right" />
                <el-table-column prop="receivableAmount" label="应收" align="right" />
                <el-table-column prop="actualAmount" label="实收" align="right" />
                <el-table-column prop="arrears" label="欠款" align="right" />
                <el-table-column prop="refund" label="退费" align="right" />
                <el-table-column prop="status" label="收费状态">
                  <template #default="scope">
                    <el-tag :type="scope.row.status === '已收' ? 'success' : 'warning'">
                      {{ scope.row.status }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <div class="pagination-wrapper">
                <el-pagination
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="totalCount"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-dialog>
</template>

<script setup name="ChargingDashboardDialog">
import { ref, computed } from 'vue'
import { Printer, Search } from '@element-plus/icons-vue'

// 弹窗显示控制
const visible = ref(false)
const activeTab = ref('reconciliation')

// 对账信息相关数据
const timeFilter = ref('today')
const selectedDate = ref('')

// 费用明细相关数据
const feeTypeFilter = ref('')
const paymentMethodFilter = ref('')
const patientSearchText = ref('')
const currentPage = ref(1)
const pageSize = ref(20)
const totalCount = ref(100)

// 费用明细模拟数据
const feeDetailsList = ref([
  {
    occurTime: '2025-04-15 14:30',
    bedNumber: '301室2床',
    patientName: '张明明',
    feeAmount: '95.00',
    discount: '0.00',
    reportAmount: '95.00',
    receivableAmount: '95.00',
    actualAmount: '95.00',
    arrears: '0.00',
    refund: '0.00',
    status: '已收'
  }
])

// 方法定义
const handleClose = () => {
  visible.value = false
}

const handleSizeChange = val => {
  pageSize.value = val
  // 这里可以调用API重新获取数据
}

const handleCurrentChange = val => {
  currentPage.value = val
  // 这里可以调用API重新获取数据
}

// 暴露方法给父组件调用
const show = () => {
  visible.value = true
}

const hide = () => {
  visible.value = false
}

// 暴露给父组件
defineExpose({
  show,
  hide
})
</script>

<style scoped lang="scss">
@use '@/assets/styles/variables.module.scss' as *;

.charging-dashboard-dialog {
  :deep(.el-dialog) {
    border-radius: 8px;
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
    color: white;
    padding: 20px;
    border-radius: 8px 8px 0 0;
  }

  :deep(.el-dialog__title) {
    color: white;
    font-size: 18px;
    font-weight: 600;
  }

  :deep(.el-dialog__headerbtn .el-dialog__close) {
    color: white;
    font-size: 20px;
  }
}

.dashboard-header {
  margin-bottom: $margin-md;

  .stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: $margin-md;
    margin-bottom: $margin-md;

    .stat-card {
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      border: 1px solid #bae6fd;
      border-radius: $border-radius;
      padding: $padding-md;
      text-align: center;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
      }

      .stat-label {
        font-size: $font-size-sm;
        color: #64748b;
      }

      .stat-value {
        font-size: $font-size-xl;
        font-weight: 600;
        color: #0f172a;
      }
    }
  }
}

.dashboard-content {
  .dashboard-tabs {
    :deep(.el-tabs__header) {
      margin-bottom: 20px;
    }

    :deep(.el-tabs__nav-wrap::after) {
      background-color: #e5e7eb;
    }

    :deep(.el-tabs__item) {
      font-size: 16px;
      font-weight: 500;
      color: #6b7280;

      &.is-active {
        color: #409eff;
      }
    }

    :deep(.el-tabs__active-bar) {
      background-color: #409eff;
    }
  }
}

.reconciliation-content {
  .filter-section {
    background: #f8fafc;
    padding: $padding-md;
    border-radius: $border-radius;
    margin-bottom: $margin-md;

    .filter-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }
  }

  .reconciliation-tables {
    height: 400px;
    overflow-y: auto;
    .table-section {
      background: white;
      border: 1px solid #e5e7eb;
      border-radius: $border-radius;
      margin-bottom: $margin-md;
      overflow: hidden;

      .section-title {
        background: #f1f5f9;
        padding: $padding-md;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid $border-color;
      }

      .summary-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

        .summary-item {
          display: flex;
          justify-content: space-between;
          padding: $padding-md;
          border-right: 1px solid $border-color;
          border-bottom: 1px solid $border-color;

          &:last-child {
            border-right: none;
          }

          .label {
            color: #6b7280;
            font-size: $font-size;
          }

          .value {
            font-weight: 600;
            color: #111827;
          }
        }
      }

      .category-grid,
      .payment-grid,
      .insurance-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

        .category-item,
        .payment-item,
        .insurance-item {
          display: flex;
          justify-content: space-between;
          padding: $padding-md;
          border-right: 1px solid $border-color;
          border-bottom: 1px solid $border-color;

          &:last-child {
            border-right: none;
          }

          .label {
            color: #6b7280;
            font-size: $font-size;
          }

          .value {
            font-weight: 600;
            color: #111827;
          }
        }
      }
    }
  }
}

.details-content {
  .filter-section {
    background: #f8fafc;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;

    .filter-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }
  }

  .details-table {
    background: white;
    border-radius: 8px;
    overflow: hidden;

    :deep(.el-table) {
      border-radius: 8px;
    }

    :deep(.el-table__header) {
      background: #f8fafc;
    }

    :deep(.el-table th) {
      background: #f8fafc;
      color: #374151;
      font-weight: 600;
    }

    :deep(.el-table td) {
      border-bottom: 1px solid #f3f4f6;
    }

    :deep(.el-table__row:hover > td) {
      background-color: #f0f9ff;
    }

    .pagination-wrapper {
      padding: 20px;
      display: flex;
      justify-content: center;
      background: #fafafa;
      border-top: 1px solid #e5e7eb;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard-header .stats-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .reconciliation-content .reconciliation-tables .table-section {
    .summary-row,
    .category-grid,
    .payment-grid,
    .insurance-grid {
      grid-template-columns: 1fr;
    }
  }

  .details-content .filter-section .filter-row {
    flex-direction: column;
    align-items: stretch;

    > * {
      width: 100% !important;
      margin-left: 0 !important;
      margin-top: 10px;

      &:first-child {
        margin-top: 0;
      }
    }
  }
}
</style>
